<template>
	<view class="container">
		<view class="overall" v-show="collectData.length">
			<view class="collect-box" v-for="(item,index) in collectData">
				<view class="cancel-icon">
					<u-icon name="backspace" size="70rpx" @click="handleCancelCollect(item.product_id,index)"></u-icon>
				</view>
				<view class="collect-img">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="collect-text">
					<view class="title">{{item.store_name}}</view>
					<view class="price">{{item.price}}</view>
				</view>
			</view>
		</view>
		<view class="divider" v-show="collectData.length">
			<u-divider text="我也是有底线的~"></u-divider>
		</view>
		<view v-show="!collectData.length">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
		<u-modal :show="cancel_show" title="取消收藏" content='确定要取消该商品吗？' :showCancelButton="true" @confirm="handleConfirm"
			@cancel="cancel_show=false" :closeOnClickOverlay="true" @close="cancel_show=false"></u-modal>
	</view>
</template>

<script>
	import { user } from '../../../api';
	export default {
		onLoad() {
			this.getCollectList();
		},
		data() {
			return {
				collectData: [],
				cancel_show: false,
				id: '',
				index: '',
			}
		},
		methods: {
			// 获取收藏列表
			async getCollectList() {
				let { status, msg, data } = await user.collect_list();
				if (status === 200) {
					this.collectData = data.list;
				}
			},
			// 取消收藏
			handleCancelCollect(id, index) {
				this.id = id;
				this.index = index;
				this.cancel_show = true;
			},
			async handleConfirm() {
				let { status, msg } = await user.cancel_collect({ id: this.id });
				if (status === 200) {
					this.collectData.splice(this.index, 1);
					this.cancel_show = false;
					uni.showToast({
						title: msg,
						duration: 2000,
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: msg,
						duration: 2000,
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.container {
		background-color: #ffffff;

		.overall {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;

			.collect-box {
				width: 41%;
				border: 2rpx solid #f5f5f5;
				padding: 20rpx;
				text-align: center;
				margin: 10rpx;

				.cancel-icon {
					display: flex;
					justify-content: flex-end;
					padding: 10rpx;
				}

				.collect-img {

					image {
						width: 290rpx;
						height: 260rpx;
					}
				}

				.collect-text {

					.title {
						font-size: 26rpx;
						color: #555555;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 10rpx;
					}

					.price {
						font-size: 26rpx;
						color: #c55a5c;
					}
				}
			}

		}



		.divider {
			padding: 0rpx 160rpx;
		}
	}
</style>